<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" th:href="@{/fav.ico}">
	<link rel="stylesheet" th:href="@{/css/iconfont.css}">
	<link rel="stylesheet" th:href="@{/css/global.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
	<link rel="stylesheet" th:href="@{/css/swiper.min.css}">
	<link rel="stylesheet" th:href="@{/css/styles.css}">
	<script th:src="@{/js/jquery.1.12.4.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/bootstrap.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/swiper.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/global.js}" charset="UTF-8"></script>
	<script type="text/javascript" th:src="@{/layer/layer.js}"></script>
	<script type="text/javascript" th:src="@{/mylayer.js}"></script>
	<title>收货地址</title>
</head>
<body>

	<div class="user-content__box clearfix bgf">
		<div class="title">个人中心-收货地址</div>
		<form action="" class="user-addr__form form-horizontal" id="address_form" role="form">
			<p class="fz18 cr">新增收货地址<span class="c6" style="margin-left: 20px">电话号码、手机号码选填一项，其余均为必填项</span></p>
			<div class="form-group">
				<label for="name" class="col-sm-2 control-label">收货人姓名：</label>
				<div class="col-sm-6">
					<input class="form-control" id="name" name="name" placeholder="请输入姓名" type="text">
				</div>
			</div>
			<div class="form-group">
				<label for="details" class="col-sm-2 control-label">收货地址：</label>
				<div class="col-sm-10">
					<div class="addr-linkage">
						<select name="province"></select>
						<select name="city"></select>
						<select name="area"></select>
					</div>
					<input class="form-control" id="details" name="detail" placeholder="建议您如实填写详细收货地址，例如街道名称，门牌号码等信息" maxlength="30" type="text">
				</div>
			</div>
			<div class="form-group">
				<label for="mobile"  class="col-sm-2 control-label">手机号码：</label>
				<div class="col-sm-6">
					<input class="form-control" id="mobile" name="phone" placeholder="请输入手机号码" type="text">
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-6">
					<button type="button" class="but" id="save_address">保存</button>
				</div>
			</div>
			<script th:src="@{/js/jquery.citys.js}"></script>
			<script>
				$(document).ready(function(){
					$('.addr-linkage').citys({
						dataUrl: 'http://passer-by.com/data_location/list.json',
						spareUrl: '[[@{/js/data_location/list.json}]]',
						dataType: 'json',
						valueType: 'name',
						province: '上海市',
						city:'黄浦区',
						area: ''
					});
				});
			</script>
		</form>
		<p class="fz18 cr">已保存的有效地址</p>

		<div class="table-thead addr-thead">
			<div class="tdf1">收货人</div>
			<div class="tdf2">所在地</div>
			<div class="tdf3"><div class="tdt-a_l">详细地址</div></div>
			<div class="tdf1">电话/手机</div>
			<div class="tdf1">操作</div>
		</div>
		<div class="addr-list">
			<div class="addr-item" th:each="address:${list}">
				<div class="address_id_div" th:text="${address.id}" style="display: none"></div>
				<div class="tdf1" th:text="${address.name}"></div>
				<div class="tdf2 tdt-a_l" th:text="${address.province?:''}+${address.city?:''}+${address.area?:''}"></div>
				<div class="tdf3 tdt-a_l" th:text="${address.detail}"></div>
				<!-- <div class="tdf1">350111</div> -->
				<div class="tdf1" th:text="${address.phone}"></div>
				<div class="tdf1 order">
					<a  class="delAddress link" >删除</a>
				</div>
			</div>
		</div>
	</div>

</body>
<script th:inline="javascript">
	$('#save_address').click(function (){
		var formData = $("#address_form").serializeArray();
		var jsonData = {};
		var ifnull=false;
		$.each(formData, function(index, field) {
			if(field.value==null||field.value==""){
				ifnull=true;
			}
			jsonData[field.name] = field.value;
		});
		if(ifnull){
			mylayer.errorMsg("数据不能为空");
			return;
		}
		$.post(
			[[${#request.getContextPath()}]]+"/user/addAddress",
			jsonData,
			function(data) {
				if(data.code==0){
					mylayer.okMsg(data.msg);
					setTimeout(function (){
						location.reload();
					},1500)
				}else {
					mylayer.errorMsg(data.msg);
				}
			},
			'json'
		);

	})

	$('.delAddress').click(function (){
		var parent_div=$(this).parents('div');
		var address_id_div=parent_div.siblings('.address_id_div');
		var addressId=address_id_div.text();
		$.post(
			[[${#request.getContextPath()}]]+"/user/deleteAddress",
				{"id":addressId},
			function(data) {
				if(data.code==0){
					mylayer.okMsg(data.msg);
					setTimeout(function (){
						location.reload();
					},1500)
				}else {
					mylayer.errorMsg(data.msg);
				}
			},
			'json'
		);
	})
	$('.link').css("cursor", "pointer");
</script>
</html>